<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick" :tab-position="tabPosition">
    <el-tab-pane label="主体指标完成情况" name="onecolda">
      <onecolda ref="onecoldaRef" v-if="activeName === 'onecolda'" />
    </el-tab-pane>
    <el-tab-pane label="质量问题情况" name="onecoldb">
      <onecoldb ref="onecoldbRef" v-if="activeName === 'onecoldb'" />
    </el-tab-pane>
    <el-tab-pane label="汽车板生产情况" name="onecoldc">
      <onecoldc ref="onecoldcRef" v-if="activeName === 'onecoldc'" />
    </el-tab-pane>
    <el-tab-pane label="原料质量情况" name="onecoldd">
      <onecoldd ref="onecolddRef" v-if="activeName === 'onecoldd'" />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { TabsPaneContext, TabsInstance } from 'element-plus';
  import onecolda from './onecolda.vue';
  import onecoldb from './onecoldb.vue';
  import onecoldc from './onecoldc.vue';
  import onecoldd from './onecoldd.vue';

  const tabPosition = ref<TabsInstance['tabPosition']>('left');
  const activeName = ref('onecolda');
  const onecoldaRef = ref<InstanceType<typeof onecolda>>();
  const onecoldbRef = ref<InstanceType<typeof onecoldb>>();
  const onecoldcRef = ref<InstanceType<typeof onecoldc>>();
  const onecolddRef = ref<InstanceType<typeof onecoldd>>();

  const handleTabClick = (tab: TabsPaneContext) => {};

  defineExpose({
    onecolda,
  });

  onMounted(() => {
    // GraphBarLine.updateChart();
  });
</script>

<style></style>
